<template>
  <div>
    <div class="toolbar">
      <button @click="undo">撤销</button>
      <button @click="redo">重做</button>
      <label for="input" class="insert">
        插入图片
        <input id="input" type="file" hidden @change="handleFileChange" />
      </label>
      <button>预览</button>
      <button>保存</button>
      <button>清空画布</button>
      <button>组合</button>
      <button>拆分</button>
      <button>锁定</button>
      <button>解锁</button>
      <button>截图</button>
      <div class="canvas-config">
        <span>画布大小</span>
        <!--        <input v-model="" />-->
        <span>*</span>
        <input title="y" />
      </div>
      <div class="canvas-config">
        <span>画布比例</span>
        <input v-model="scale" @input="handleScaleChange" /> %
      </div>
    </div>

    <!--预览-->
    <PreView
      v-if="isShowPreview"
      :is-screenshot="isScreenshot"
      @close="handlePreviewChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { defineComponent, onMounted, ref } from "vue";
import PreView from "@/components/Editor/PreView.vue";
import { toast } from "@/utils/toast";
import eventBus from "@/utils/eventBus";
import { useCopyStore, useGlobalStore } from "@/store";
import { commonAttr, commonStyle } from "@/components/custom/component-list";
import generateID from "@/utils/generateID";
import { selector } from "@/utils/utils";

const globalStore = useGlobalStore();
const copyStore = useCopyStore();

const isShowPreview = ref(false);
const isScreenshot = ref(false);
const scale = ref<number>(100);
let timer: number | null | undefined = null;

scale.value = globalStore.canvasStyleData.scale;
// 注册全局事件
onMounted(() => {
  eventBus.on("preview", () => {
    preview();
  });
  eventBus.on("save", () => {
    save();
  });
  eventBus.on("clearCanvas", () => {
    clearCanvas();
  });
});
const handleScaleChange = async () => {
  console.log("handleScaleChange");
  if (timer) {
    clearTimeout(timer);
  }
  timer = setTimeout(() => {
    if (!Number.isNaN(scale.value)) {
      scale.value = scale.value > 0 ? scale.value : 1;
    }
  }, 1000);
};
//
const handleFileChange = async (e: any) => {
  const file = e.target.files[0];
  if (!file.type.includes("image")) {
    toast("只能插入图片");
    return;
  }
  const reader = new FileReader();
  reader.onload = (res: ProgressEvent<FileReader>) => {
    const fileResult = res?.target?.result;
    const image = new Image();
    image.onload = () => {
      const component = {
        ...commonAttr,
        id: generateID(),
        component: "Picture",
        label: "图片",
        icon: "",
        propValue: {
          url: fileResult,
          flip: {
            horizontal: false,
            vertical: false,
          },
        },
        style: {
          ...commonStyle,
          top: 0,
          left: 0,
          width: image.width,
          height: image.height,
        },
      };
      selector("#input").setAttribute("type", "text");
      selector("#input").setAttribute("type", "file");
    };
    image.src = fileResult;
  };
  reader.readAsDataURL(file);
};

const preview = async () => {
  console.log("preview");
};
//undo事件
const undo = async () => {
  console.log("undo");
  toast("undo", "success", 3000);
};
//重做事件
const redo = async () => {
  console.log("redo");
};
//保存事件
const save = async () => {
  console.log("save");
};
//清除画布事件
const clearCanvas = async () => {
  console.log("clearCanvas");
};
const handlePreviewChange = async () => {
  console.log("handlePreviewChange");
};

defineComponent({
  components: { PreView },
});
</script>

<style lang="scss" scoped>
.toolbar {
  padding: 15px 10px;
  white-space: nowrap;
  overflow-x: auto;
  background: #fff;
  border-bottom: 1px solid #ddd;

  button {
    margin-left: 10px;

    &:first-child {
      margin-left: 0;
    }
  }

  .canvas-config {
    display: inline-block;
    margin-left: 10px;
    font-size: 14px;
    color: #606266;

    input {
      width: 50px;
      margin-left: 4px;
      outline: none;
      padding: 0 5px;
      border: 1px solid #ddd;
      color: #606266;
    }

    span {
      margin-left: 10px;
    }
  }

  .insert {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: 0;
    transition: 0.1s;
    font-weight: 500;
    padding: 9px 15px;
    font-size: 12px;
    border-radius: 3px;
    margin: 0 0 0 10px;

    &:active {
      color: #3a8ee6;
      border-color: #3a8ee6;
      outline: 0;
    }

    &:hover {
      background-color: #ecf5ff;
      color: #3a8ee6;
    }
  }
}
</style>
